<template>
    <div class="catego-container">
        <breadCrumb title="商品分类"></breadCrumb>

        <el-card>
          <el-button type="primary" style="margin-bottom: 20px;" size="small" @click="dialogVisible=true">添加分类</el-button>

          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{background:'#F8F8F9',color:'#000',fontWeight:'600'}"
            row-key="cat_id"
            :tree-props="{children: 'children'}"
            border>
            <el-table-column
              label="序号"
              type="index"
              width="50"
              >
              <template slot-scope="{row}">
                {{ row.indexKey+1 || '' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="cat_name"
              label="分类名称"
              width="350"
              >
            </el-table-column>
            <el-table-column
            prop="cat_deleted"
              label="是否有效"
              width="350">
              <template slot-scope="{row}" v-if="!row.cat_deleted" >
                <i class="el-icon-success" style="color: skyblue;"></i>
              </template>
              <template v-else >
                <i class="el-icon-error" style="color: red;"></i>
              </template>
            </el-table-column>
            <el-table-column
              prop="cat_level"
              label="排序"
              width="300">
              <template slot-scope="{row}">
                  <el-tag v-if="row.cat_level === 0" style="color: #79C5FF;background-color: #ECF5FF">{{ meiju(row.cat_level) }}</el-tag>
                  <el-tag v-if="row.cat_level === 1" style="color: #67C23A;background-color: #F0F9EB">{{ meiju(row.cat_level) }}</el-tag>
                  <el-tag v-if="row.cat_level === 2" style="color: #E6AAA7;background-color: #FDF6EC">{{ meiju(row.cat_level) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="formData.pagenum"
              :page-sizes="[2, 4, 6, 8]"
              :page-size="formData.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </el-card>
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose">
          <el-form width-label="100">
            <el-form-item label="分类名称">
              <el-input></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
import { meiju, bgc } from '@/utils/index'
import { getCategories1 } from '@/api/goods'
export default {
  name: 'ShoppingCategories',

  data () {
    return {
      tableData: [],
      meiju,
      bgc,
      formData: {
        type: '3',
        pagenum: 1,
        pagesize: 2
      },
      total: null,
      dialogVisible: false
    }
  },

  created () {
    this.getCateList()
  },

  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 获取数据
    async getCateList () {
      const res = await getCategories1(this.formData)
      this.total = res.data.total
      // res.data.result
      res.data.result.forEach((item, index) => {
        // eslint-disable-next-line dot-notation
        item['indexKey'] = index
      })
      this.tableData = res.data.result
      console.log(res.data.result)
    },
    handleSizeChange (val) {
      this.formData.pagesize = val
      this.getCateList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.formData.pagenum = val
      this.getCateList()
      console.log(`当前页: ${val}`)
    }
  },
  computed: {
  }
}
</script>

<style lang="scss" scoped>

</style>
